<template>
	<view class="content">
		<u-navbar title="直播配置" bgColor="transparent" placeholder autoBack=""></u-navbar>
		<!-- @leftClick="$tools.switchTab('openLive/openLive')" -->

		<view class="">
			<view class="">
				<u--form labelPosition="left" :model="formData" labelWidth="500" :rules="rules" ref="uForm">
					<view class="setting">
						<u-form-item label="直播方案" prop="option" ref="item1">
							<uni-combox :candidates="candidates" :border="false" placeholder="请选择直播方案" emptyTips="暂未找到直播方案"
								v-model="formData.option"></uni-combox>
						</u-form-item>
						<u-form-item label="直播平台" prop="actions" @click="showAction = true" ref="item1">
							<uni-combox :candidates="platforms" :border="false" placeholder="请选择直播平台" emptyTips="暂未找到该平台"
								v-model="formData.actions"></uni-combox>
						</u-form-item>
						<u-form-item label="房间号" prop="roomId" ref="item1">
							<u--input v-model.trim="formData.roomId" placeholder="请输入房间号" border="none"></u--input>
						</u-form-item>
					</view>

					<view class="setting">
						<u-form-item label="商品讲解顺序" prop="roomId" ref="item1">
							<u-subsection activeColor="#2059F3" :list="sequence" bgColor="#f7fafc" :current="formData.sequence"
								@change="setSequence"></u-subsection>
						</u-form-item>
						<!-- '<u-form-item label="开播类型" prop="roomId" ref="item1">
							<u-subsection activeColor="#2059F3" :list="typelist" bgColor="#f7fafc" :current="formData.type"
								@change="setType"></u-subsection>
						</u-form-item>' -->
						
						
						<view class="bold" style="font-family: YuanTi;" @click="$tools.navTo('openLive/tools')">
							工具
						</view>

						<view class="btn" @click="saveSetting">
							保存配置开播
						</view>
					</view>
				</u--form>
			</view>
		</view>

		<!-- <view class="pd30 fs30 df" v-show="formData.showProduct!='none'" style="width: 36vw;color: #2979ff;"
			@click="toWebview">
			点击去授权直播间 <u-icon name="arrow-right" color="#2979ff" size="17"></u-icon>
		</view> -->

	</view>
</template>

<script>
	export default {
		data() {
			return {
				roomId: '',
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				formData: {
					roomId: '',
					actions: '',
					option: '',
					optionId: '',
					playNext: '1',
					sequence: 0,
					type: 0,
					showProduct: 'none',
					isSequence: true,
				},
				liveList: [],
				candidates: [],
				platforms: ['抖音', '快手', 'tiktok', '其他'],
				sequence: ['顺序', '随机'],
				typelist: ['数字人直播', '实景开播'],
				rules: {
					roomId: {
						type: 'string',
						required: true,
						message: '请输入直播间房间号',
						trigger: ['blur', 'change']
					},
					actions: {
						type: 'string',
						required: true,
						message: '请选择直播平台',
						trigger: ['blur', 'change']
					},
					option: {
						type: 'string',
						required: true,
						message: '请选择直播方案',
						trigger: ['blur', 'change']
					},
				},
			};
		},
		onLoad() {
			this.getLiveList()
		},
		methods: {
			toWebview() {
				uni.$u.toast('请登录直播间获取信息，若已登录请手动返回')
				if (this.formData.showProduct == 'carProduct') {
					uni.setStorageSync('showProduct', 'login')
				} else {
					uni.setStorageSync('showProduct', 'liveProduct')
				}
				setTimeout(() => {
					this.$tools.navTo('webview/webview')
				}, 1000)
			},
			getLiveList() {
				this.$api.getlive({
					page: 1,
					item: 10,
				}).then(res => {
					console.log(res);
					if (res.code == 200) {
						this.liveList = res.data.list
						res.data.list.map(i => {
							this.candidates.push(i.title)
						})
					} else {
						this.$tools.toast(res.msg);
					}
				})
			},
			setSequence(e) {
				console.log(e);
				this.formData.sequence = e
			},
			setType(e) {
				this.formData.type = e
			},
			saveSetting() {
				if (this.formData.type) {
					// console.log(11111111111);
					this.$tools.navTo('openLive/realityLive')
				} else {
					this.initLiveSticker()
					return
					this.$refs.uForm.validate().then(res => {
						this.liveList.map(r => {
							if (r.name == this.formData.option) {
								this.formData.optionId = r.id
							}
						})
						console.log('info', this.formData);
						uni.setStorageSync('liveSetting', JSON.stringify(this.formData))
						uni.setStorageSync('openLive', true)
						this.$tools.switchTab('openLive/openLive')
					}).catch(errors => {
						console.log(errors);
						uni.$u.toast('请填写配置项再开播')
					})
				}
			},
			initLiveSticker() {
				const liveTool = uni.requireNativePlugin('Hd-StickerTool');
				let params = {
					thread_num: 6,
					model: 2
				};
				liveTool.initStickerSdk(params, (result) => {
					console.log(`liveSticker-result`, JSON.stringify(result));
					this.$tools.navTo('openLive/AILive/index')
				});
			},
		},
	}
</script>

<style lang="less">
	.content {
		background: url("@/static/img/live/liveBg.png");
		height: 100%;
		width: 100vw;
		overflow-x: hidden;
	}


	.setting {
		margin: 30rpx;
		background: #fff;
		padding: 30rpx;
		border-radius: 8px;
		box-shadow: 0px 4px 10px rgba(20, 111, 255, 0.04);

		.live {
			font-size: 32rpx;
			font-weight: 600;
			width: 67%;
		}
	}

	.btn {
		margin: 80rpx auto 60rpx;
		width: 80vw;
		border-radius: 20rpx;
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
		color: #fff;
		// background-color: #6a8bff;
		background-color: #146fff;
		box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.09);
	}

	::v-deep {
		.uni-combox__selector {
			z-index: 9;
		}

		.uni-combox {
			width: 100%;
		}

		.u-form-item__body {
			flex-wrap: wrap !important;
		}

		.u-form-item__body__right__message {
			margin: 0 !important;
		}

		.u-form-item__body__left {
			margin-bottom: 20rpx !important;
		}

		.u-navbar__content {
			background: transparent !important;
		}

		.u-form-item__body__left {
			font-weight: 700;
		}

		.uni-combox__no-border {
			background: #f7fafc;
		}

		.uni-combox {
			padding: 20rpx 26rpx !important;
			background: #f7fafc !important;
		}

		.u-input {
			background: #f7fafc !important;
			padding: 20rpx 26rpx !important;
		}

		.u-subsection--button {
			height: 84rpx !important;
			padding: 8rpx !important;
		}
	}
</style>